<template>
    <div id="add-agency">
        <Title title="添加机构"/>
        <div id="form">
            <el-form :model="group" style="width: 80%; text-align: center" ref="ruleForm"
                     :rules="rules"
                     label-width="80px" class="form">
                <el-form-item prop="groupName"  label="机构名" style="width: 300px; height: 30px">
                    <el-input v-model="group.groupName"  placeholder="请输入内容"/>
                </el-form-item>
                <el-form-item prop="groupTypeId" label="所属类型" style="width: 300px; height: 30px">
                    <el-select v-model="group.groupTypeId" placeholder="请选择">
                        <el-option label="学校" value="2"/>
                        <el-option label="教育局" value="3"/>
                        <el-option label="教育厅" value="4"/>
                    </el-select>
                </el-form-item>
                <!--            所属区域-->
                <el-form-item
                        prop="address"
                         label="所属区域">
                    <el-cascader :props="props" @change="handleCascader" :key="isKey" ></el-cascader>
                </el-form-item>
                <el-form-item style="width: 100px;">
                    <el-button key="1" size="small" type="primary" @click.prevent="sub('ruleForm')" >
                        添加
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

        <Title title="机构信息"/>

        <el-table border
                :data="tableData
                .filter(item=>{
                            if (item.groupTypeId===2){
                                item.groupTypeId = '学校';
                                }else if (item.groupTypeId===3){
                                item.groupTypeId = '教育局';
                                }else if (item.groupTypeId===4){
                                item.groupTypeId = '教育厅';
                                }
                                return item;
                                })"
                style="width: 100%">
            <el-table-column label="机构名" prop="groupName"/>
            <el-table-column label="类型" prop="groupTypeId"/>
            <el-table-column label="地址" prop="address"/>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

<!--        分页-->
        <Pagination path="/api/Studies_to_travel/group/queryGroupAllInfoPaging"
                    :item="item"
                    :count="count"
                    @transfer="transfer"
           />

<!--        修改弹出=框-->

        <el-dialog title="修改机构信息" :visible.sync="dialogFormVisible">

            <el-form  ref="ruleForm1" label-width="80px" style="margin-left: 20%" :model="form" :rules="rules" >
                <el-form-item prop="groupName"  label="机构名" >
                    <el-input v-model="form.groupName" style="width: 300px"  placeholder="请输入内容"/>
                </el-form-item>

                <el-form-item  label="原地址" >
                    <el-input :disabled="true" v-model="form.address" style="width: 300px"  placeholder="请输入内容"/>
                </el-form-item>
                <!--            所属区域-->
                <el-form-item
                    label="新地址"
                    prop="xinAddress">
                    <el-cascader :props="props" style="width: 300px"   @change="handleCascader1" :key="isKey1" ></el-cascader>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateGroup('ruleForm1')">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import Title from "@/components/title/Title";
    import {Dialog,MessageBox,Cascader,Table, TableColumn, Button,
        Input, Select, Form, FormItem, Option} from "element-ui";
    import Pagination from "@/components/pagination/Pagination";
    import {post} from "../../../request/AxiosMAX";
    export default {
        name: "AddAgency",
        components: {
            Title,
            "el-table": Table,
            "el-table-column": TableColumn,
            "el-button": Button,
            "el-input": Input,
            "el-select": Select,
            "el-form": Form,
            "el-form-item": FormItem,
            "el-option": Option,
            "el-dialog":Dialog,
            Pagination,
            "el-cascader":Cascader
        },
        data() {
            return {
                //验证1
                rules: {
                    groupName:[
                        { required: true, message: '请输入机构名', trigger: 'blur' }
                    ],
                    address:[
                        { required: true, message: '请输入所属区域', trigger: 'change' }
                    ],
                    groupTypeId:[
                        { required: true, message: '请输入机构类型', trigger: 'change' }
                    ]
                },
                //清空级联选择框用的
                isKey:0,
                isKey1:0,
                //级联数据
                props: {
                    lazy: true,
                    lazyLoad (node, resolve) {
                        const { level } = node;
                        if (level===0){
                            post("/api/Studies_to_travel/address/queryByParent").then(
                                res=>{
                                    if (res.code===0){
                                        let nodes = [];
                                        res.data.forEach(item=>{
                                            let node = {};
                                            node.id = item.id;
                                            node.value = item.address;
                                            node.label = item.address;
                                            nodes.push(node);
                                        });
                                        resolve(nodes);
                                    }
                                }
                            );
                        }else if (level===1){
                            let data = {
                                parentId:node.data.id
                            };
                            console.info(data);
                            post("/api/Studies_to_travel/address/queryByParentId",data).then(
                                res=>{
                                    if (res.code===0){
                                        let nodes = [];
                                        res.data.forEach(item=>{
                                            let node = {};
                                            node.id = item.id;
                                            node.value = item.address;
                                            node.label = item.address;
                                            nodes.push(node);
                                        });
                                        resolve(nodes);
                                    }
                                }
                            );
                        }else {
                            let data = {
                                parentId:node.data.id
                            };
                            post("/api/Studies_to_travel/address/queryByParentId",data).then(
                                res=>{
                                    if (res.code===0){
                                        let nodes = [];
                                        res.data.forEach(item=>{
                                            let node = {};
                                            node.id = item.id;
                                            node.value = item.address;
                                            node.label = item.address;
                                            node.leaf = "leaf";
                                            nodes.push(node);
                                        });
                                        resolve(nodes);
                                    }
                                }
                            );
                        }
                    }
                },
                //表单数据
                tableData: [],
                //机构对象
                group:{
                    groupTypeId:'',
                    groupName:'',
                    address:'',
                    state:0
                },
                //分页需要用的数据
                item:{
                    startNumber:1,
                    pageSize:6
                },
                count:0,
                //弹出
                dialogFormVisible:false,
                form: {
                    groupTypeId:'',
                    groupName:'',
                    address:'',
                    xinAddress:''
                },
                formLabelWidth: '120px'
            }
        },
        methods: {
            updateGroup(formName){
                MessageBox.confirm ('是否修改机构信息', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$refs[formName].validate((valid) => {
                        if (valid){
                            if (this.form.xinAddress!=null){
                                this.form.address = this.form.xinAddress;
                            }
                            post("/api/Studies_to_travel/group/updateGroupInfo",this.form)
                                .then(res=>{
                                    if (res.code===0){
                                        ++this.isKey1;
                                        this.tableData[this.form.index] = res.data;
                                        //清楚表单数据
                                        this.$refs[formName].resetFields();
                                        this.$message({
                                            message: '修改成功~',
                                            type: 'success'
                                        });
                                        //网页更新最新数据

                                        this.dialogFormVisible = false;
                                    }else {
                                        this.$message({
                                            message: '修改失败~',
                                            type: 'error'
                                        });
                                    }
                                })
                                .catch(err=>{
                                    console.info(err);
                                    this.$message({
                                        message: '网络错误~',
                                        type: 'error'
                                    });
                                });
                        }
                    })
                });

            },
            //获得子组件传过来的参数
            transfer(item){
              this.tableData = item.data;
              this.count = item.count;
            },
            //添加
            sub(formName){

                this.$refs[formName].validate((valid) => {
                    if (valid){
                        post("/api/Studies_to_travel/group/insertGroupInfo",this.group)
                            .then(res=>{
                                if (res.code===0){
                                    //添加到首位
                                    this.tableData.unshift(res.data);
                                    ++this.isKey;
                                    //清楚表单数据
                                    this.$refs[formName].resetFields();
                                    this.$message({
                                        message: '提交成功~',
                                        type: 'success'
                                    });
                                    console.info(this.tableData)
                                }else {
                                    this.$message({
                                        message: '提交失败~',
                                        type: 'error'
                                    });
                                }
                            })
                            .catch(err=>{
                                console.info(err);
                                this.$message({
                                    message: '网络错误~',
                                    type: 'error'
                                });
                            });
                    }
                })
            },
            handleEdit(index, row) {
                console.log(index, row);
                post("/api/Studies_to_travel/group/getGroupInfoByGroupId",{groupId:row.id})
                    .then(res=>{
                        if (res.code===0){
                            //获得对象
                            this.form = res.data;
                            this.form.index = index;
                            //打开弹出层
                            this.dialogFormVisible = true;
                        }
                    })
                    .catch(err=>{
                        console.info(err);
                    });

            },
            //删除
            handleDelete(index, row) {
                MessageBox.confirm ('此机构下的用户也会删除,是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发送亲求
                    post("/api/Studies_to_travel/group/deleteInfoByGroupId",{groupId:row.id})
                        .then(res=>{

                        if (res.code===0){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            //删除删除的数据
                            this.tableData.splice(index,1);
                        }else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                    }).catch(err=>{
                        console.info(err);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //获得级联选择器中的值
            handleCascader(item){
                this.group.address = item[0]+item[1]+item[2];
            },
            handleCascader1(item){
                this.form.xinAddress = item[0]+item[1]+item[2];
                console.info(this.form.xinAddress)
            }
        },
        created() {
            //获得机构
            post("/api/Studies_to_travel/group/queryGroupAllInfoPaging",this.item)
                .then(res=>{
                    if (res.code===0){
                        this.tableData = res.data;
                        this.count = res.count;
                    }
                })
                .catch(err=>{
                    console.info(err);
                })
        }
    }
</script>

<style lang="less">
    #form{
        .form{
            display: flex;
        }
    }
</style>
